<template>
  <el-row style="width: 100%">
    <el-col :lg="16" :md="12" :xs="24" class="left">
      <div class="content">
        <h2 class="title">欢迎光临</h2>
        <div class="desc">此项目为多商户电商项目管理端 -- made by 洛鸢</div>
      </div>
    </el-col>
    <el-col :lg="8" :md="12" :xs="24" class="right">
      <div class="content">
        <h2 class="tip">欢迎回来</h2>
        <div class="title">
          <span class="line"></span>
          <span class="text">账号密码登录</span>
          <span class="line"></span>
        </div>
        <!--        登录-->
        <el-form :rules="loginRules" :model="accountForm">
          <el-form-item prop="userName">
            <el-input
              placeholder="请输入用户名"
              v-model="accountForm.userName"
              @keyup.enter="handleLoginClick"
            >
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              show-password
              placeholder="请输入密码"
              v-model="accountForm.password"
              @keyup.enter="handleLoginClick"
            >
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code" style="display: flex">
            <div class="code">
              <el-input
                placeholder="请输入验证码"
                v-model="accountForm.code"
                @keyup.enter="handleLoginClick"
              />
              <img @click="getNewCode" :src="codeUrl" />
            </div>
          </el-form-item>
        </el-form>
        <el-button
          round
          :loading="isLogining"
          style="width: 100%"
          @click="handleLoginClick"
          >登录
        </el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useAccountStore } from '@/store'
import { storeToRefs } from 'pinia'

// 首次加载获取验证码
const accountStore = useAccountStore()
accountStore.getVerifyCodeAction()
const { codeUrl, isLogining } = storeToRefs(accountStore)

// 表单数据
const accountForm = reactive({
  userName: '',
  password: '',
  code: ''
})

// 表单验证规则
const loginRules = {
  userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}

// 点击图片按钮新的验证码
const getNewCode = () => {
  accountStore.getVerifyCodeAction()
}

// 点击‘登录’发送请求
const handleLoginClick = () => {
  // 请求开始开启登录旁边的加载图标
  isLogining.value = true
  accountStore.reqAccountLoginAction({ ...accountForm })
}
</script>

<style scoped lang="less">
.el-form-item {
  //margin-bottom: 12px;
}

.el-row {
  width: 100%;
  height: 100%;

  .left {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ly-primary-color);

    .content {
      .title {
        color: #ffffff;
        margin-bottom: 20px;
      }

      .desc {
        font-size: 15px;
        color: #f8f5f5;
      }
    }
  }

  .right {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
      .tip {
        font-size: 25px;
        text-align: center;
      }

      .title {
        text-align: center;
        color: #d1d5e2;
        margin: 18px 0;

        .text {
          margin: 0 18px;
          font-size: 15px;
        }

        .line {
          display: inline-block;
          line-height: 1px;
          height: 1px;
          width: 70px;
          background-color: #d1d5e2;
          margin-bottom: 5px;
        }
      }
    }

    .code {
      display: flex;
      align-items: center;

      img {
        margin-left: 5px;
        width: 100px;
        height: 28px;
        -webkit-user-drag: none;
      }
    }
  }
}

//当屏幕最小宽度为992px
@media screen and (min-width: 992px) {
  .left {
    height: 100%;
    padding: 0 100px 20px 0;

    .title {
      font-size: 35px;
    }
  }

  .right {
    height: 100%;
  }
}

//当屏幕宽度 最大为991px时
@media screen and (max-width: 991px) {
  .left {
    height: 30%;

    .title {
      font-size: 25px;
    }
  }

  .right {
    height: 70%;
  }
}
</style>
